<template>
    <div id="search">
      <van-search
        v-model="text"
        show-action
        shape="round"
        placeholder="请输入搜索关键词"
      >
        <template #left>
          <van-icon @click="back" style="margin-right: 3%" name="arrow-left" />
        </template>
        <template #action>
          <div @click="onSearch">搜索</div>
        </template>
      </van-search>
      <div class="content">
        <div class="title">大家都在搜</div>
        <div class="cont">
          <span>免费设计</span>
          <span>现代简约</span>
          <span>厨房</span>
          <span>新中式</span>
          <span>轻奢风</span>
          <span>小户型</span>
          <span>阳台</span>
          <span>卫生间</span>
          <span>客厅</span>
        </div>
      </div>
    </div>
</template>

<script>
import { Search, Icon } from 'vant'
import 'vant/lib/search/style'
import 'vant/lib/icon/style'

import { getSearch } from '../api'

export default {
  name: 'search',
  data () {
    return {
      text: ''
    }
  },
  methods: {
    onSearch () {
      getSearch({
        title: this.text
      }).then((res) => {
        console.log(res)
      })
    },
    back () {
      window.history.back()
    }
  },
  components: {
    [Search.name]: Search,
    [Icon.name]: Icon
  }
}
</script>

<style scoped>
  .van-search__content--round {
    border: 1px solid rgb(241, 242, 245);
  }
  /*.cont {*/
  /*  position: relative;*/
  /*}*/
  .content {
    width: 94%;
    padding: 0 3%
  }
  .title {
    color: rgb(31, 33, 46)
  }
  .cont span {
    display: inline-block;
    text-align: center;
    font-size: 12px;
    background: rgb(245, 247, 250);
    /*background: rgb(245, 247, 2);*/
    padding: 3%;
    margin: 1% 3%;
    border-radius: 43% 43% 43%;
  }
</style>
